import React, { useState, useEffect } from 'react';


import { View, Text, Button as Button2, TextInput, TouchableOpacity, StyleSheet, PixelRatio, Alert, Image, Pressable, ImageBackground } from 'react-native';
import { styles } from '../MyStyle';
import { MYBLACK, MYBLACK_Percent10, MyButton01, showToast } from '../UiComponents';

import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement, reset } from './redux/actions';
import NativeLocalStorage from '../specs/NativeLocalStorage';

import { BackButton } from '../UiComponents';

// import Icon from 'react-native-vector-icons/FontAwesome';

import {
  createStaticNavigation,
  useNavigation,
} from '@react-navigation/native';
// import { Center } from 'native-base';

import { Center, Square, Circle } from 'native-base';

import { Loading } from '../Loading';
import { Flex } from '@ant-design/react-native';

import axios from 'axios';

import { HStack } from 'native-base';
import { ModalExample } from './FlatListDemo';


// https://redux.js.org/introduction/getting-started
// npm install redux react-redux


// 定义接口类型
interface UserData {
  // 根据实际返回的数据结构定义
  accessToken: string;
  companyId: string;
  companyName: string;
  qrCode: string;
  userId: string;
}

interface ApiResponse<T> {
  data: T;
  code: number;
  message: string;
}


// 登录请求函数
const login2 = async (sn: string): Promise<ApiResponse<UserData>> => {
  try {
    const response = await axios.post<ApiResponse<UserData>>(
      'https://applet.xmlights.com/robot/login',  // 修改为实际的 API 地址
      null, // POST 请求体，可能是空的
      {
        params: { sn },  // 查询参数
      }
    );
    return response.data;  // 返回数据
  } catch (error) {
    console.error('Login failed:', error);
    throw error;  // 或者返回错误消息
  }
};


export function FangAnku() {
  const [index, setIndex] = useState<string>('0'); // 默认选择私库
  const [text, setText] = useState<string>(''); // 默认选择私库

  const handlePress = (selectedIndex: string) => {
    setIndex(selectedIndex);
  };


  // useEffect(() => {
  //   // 每秒钟切换一次 index
  //   const intervalId = setInterval(() => {
  //     setIndex((prevIndex) => (prevIndex === '0' ? '1' : '0')); // 切换值
  //   }, 1000); // 每隔1000毫秒（1秒）执行一次

  //   // 清除定时器，防止组件卸载时继续执行
  //   return () => clearInterval(intervalId);
  // }, []); // 只在组件挂载时运行一次

  

  return <ImageBackground 
  source={require('./../assets/bg.png')}
  style={{
padding:30/3.5,
  flex: 1,
backgroundColor:"#fff0000",
  }}>


<View style={styles2.container}>

<Text  style={styles2.text}>方案库</Text>


{/* <View  style={{flexDirection:'row', paddingBottom:6,backg   roundColor:"red"}}> */}


<View style={styles2.box}>

  <View  style={{flexDirection:'row',backgroundColor:MYBLACK_Percent10}}>

<MyButton01 text='私库' 
  onPress={()=>handlePress('0')}
  textColor={MYBLACK}
  containerColor={index === '0' ? 'white' : MYBLACK_Percent10}
  size = {{ width: 148, height: 42} }
  />

  <View  style={{width:3}}/>

<MyButton01 text='公库' 
 onPress={()=>handlePress('1')}
 containerColor={index === '1' ? 'white' : MYBLACK_Percent10}
  textColor={MYBLACK}
  size = {{ width: 148, height: 42} }
  />

</View>

{/* <View  style={{width:30}}/> */}

<View style={styles2.inputContainer}>

<TextInput
        style={{
          width: 214,
          height: 42,
          backgroundColor:'rgba(255,255,255,0.4)',
          // borderColor: '#rgba(1,1,1,0.4)',
          borderWidth: 0,
          paddingLeft: 6,
          paddingRight:70,
          paddingTop:0,
          paddingBottom:0,
          // marginBottom: 20,
          borderRadius: 10,

        }} // 样式
        value={text} // 绑定输入框的值
        onChangeText={setText} // 处理文本变化
        placeholder="请输入关键词搜索" // 提示文字
      />

<Image
        source={require('../assets/search.png')} // 替换为你的搜索图标路径
        style={{
          position: 'absolute',
          left:140,
          // right: 10, // 控制图标位置，距离输入框右侧 10px
          // top: '50%', // 垂直居中
          // transform: [{ translateY: -10 }], // 微调垂直位置
          // width: 20,
          // height: 20, // 设置图标的大小
        }}
      />
    </View>
    </View>


<ModalExample/>


    </View>

</ImageBackground>;
}

export  const WrapContentExample = () => {
  return (
    <View style={styles2.container}>
      <View style={styles2.box}>
        <Text>This box adjusts to content size!</Text>
        <Text>This box adjusts to content size!</Text>
      </View>
    </View>
  );
};


const styles2 = StyleSheet.create({
  text: {
    fontWeight: 'bold',  // 设置粗体
    fontSize: 10,        // 设置字体大小为 10
    color: 'black',      // 设置文字颜色为 MYBLACK（在此用黑色表示）
  },


  hstack: {
    alignItems: 'flex-start', // 让 HStack 的高度与内容一致
    backgroundColor: 'rgba(0, 0, 0, 0.05)', // 黑色背景，透明度 5%
    padding: 10,
    borderRadius: 8, // 可选，给容器增加圆角
  },

  container: {
    flex: 1,
    justifyContent: 'flex-start',
    alignItems: 'flex-start', // Center the box in the screen
  },
  box: {
    backgroundColor: '#00000000',
    flexDirection:"row",
    padding: 0, // Adjust the padding as needed
    borderRadius: 10,
  },


  input: {
    width: 374,
    height: 42,
    borderColor: '#ccc',
    borderWidth: 1,
    paddingLeft: 0,
    paddingRight:40,
    paddingTop:0,
    paddingBottom:0,
    // marginBottom: 20,
    borderRadius: 5,
  },

  inputContainer: {
    flexDirection: 'row', // 让输入框和图标横向排列
    alignItems: 'center', // 垂直居中对齐
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 5,
    left:20,
    // width: '100%',
  },

  iconContainer: {
    padding: 10, // 图标的点击区域
  },

  icon: {
    position: 'absolute',
    left:300,
    // right: 10, // 控制图标位置，距离输入框右侧 10px
    // top: '50%', // 垂直居中
    // transform: [{ translateY: -10 }], // 微调垂直位置
    width: 20,
    height: 20, // 设置图标的大小
  },





});

export  const Demo1 = () => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <View style={{
        position: 'relative',
        backgroundColor: 'lightblue',
        width: 200,
        height: 100,
        justifyContent: 'center',
        alignItems: 'center'
      }}>
        <Text>Normal View</Text>
      </View>

      <View style={{
        // position: 'relative',
        backgroundColor: 'coral',
        width: 200,
        height: 100,
        justifyContent: 'center',
        alignItems: 'center',
        top: 20 // Move 20px down from the original position
      }}>
        <Text>Offset View (relative)</Text>
      </View>
    </View>
  );
};


